<template>
  <div class="course-item-content" v-if="itemObj">
    <div class="course-img-box">
      <img class="course-img" v-if="itemObj.userStatus == '0' && $utils.compareDate(itemObj.strattime,$utils.getDate(),itemObj.endtime)"  @click="loadTcourse(itemObj)"  src="~@assets/images/course_login.png" v-real-img="itemObj.pic" alt="">
      <img class="course-img" v-else @click="showTcourse(itemObj)" src="~@assets/images/course_login.png" v-real-img="itemObj.pic" alt="">
    </div>
    <div class="course-detail" :style="{width: width}">
      <div class="course-info">
        <div class="title ellipsis-one" :title="$utils.setText(itemObj.name)">{{$utils.setText(itemObj.name)}}</div>
        <div class="">学习时间： {{itemObj.strattime}} 至 {{itemObj.endtime}}</div>
        <div v-if="itemObj.creditCal  && $store.state.app.footer.webTemplateType.indexOf('V4') !== -1">
          <div v-if="itemObj.creditCal !== '0'">
            要求学时：
            <span style="margin-right: 5px;" v-if="itemObj.compulsoryCredit && itemObj.compulsoryCredit !== '0'">必修课-{{itemObj.compulsoryCredit}}学时</span>
            <span v-if="itemObj.electiveCredit && itemObj.electiveCredit !== '0'">选修课-{{itemObj.electiveCredit}}学时</span>
          </div>
          <div v-if="itemObj.creditCal == '0'">
            要求学时：
            <span style="margin-right: 5px;" v-if="itemObj.compulsoryCredit && itemObj.compulsoryCredit !== '0'">必修课-{{itemObj.compulsoryCredit}}门</span>
            <span v-if="itemObj.electiveCredit && itemObj.electiveCredit !== '0'">选修课-{{itemObj.electiveCredit}}门</span>
          </div>
          <div v-if="!itemObj.compulsoryCredit || !itemObj.electiveCredit">{{itemObj.credit}}学时</div>
        </div>
        <div v-if="itemObj.creditCal  && $store.state.app.footer.webTemplateType.indexOf('V4') == -1">
          <div v-if="itemObj.creditCal !== '0'">
            要求学时：
            <span style="margin-right: 5px;" v-if="itemObj.compulsoryCredit && itemObj.compulsoryCredit !== '0'">公需课-{{itemObj.compulsoryCredit}}学时</span>
            <span v-if="itemObj.electiveCredit && itemObj.electiveCredit !== '0'">专业课-{{itemObj.electiveCredit}}学时</span>
          </div>
          <div v-if="itemObj.creditCal == '0'">
            要求学时：
            <span style="margin-right: 5px;" v-if="itemObj.compulsoryCredit && itemObj.compulsoryCredit !== '0'">公需课-{{itemObj.compulsoryCredit}}门</span>
            <span v-if="itemObj.electiveCredit && itemObj.electiveCredit !== '0'">专业课-{{itemObj.electiveCredit}}门</span>
          </div>
          <div v-if="!itemObj.compulsoryCredit || !itemObj.electiveCredit">{{itemObj.credit}}学时</div>
        </div>

        <div v-if="!itemObj.creditCal">
          <img src="~@assets/images/training-time.png" alt="">
          <span style="margin-right: 5px;" v-if="itemObj.compulsoryCredit && itemObj.compulsoryCredit !== '0' && $store.state.app.footer.webTemplateType.indexOf('V4') !== -1">必修课-{{itemObj.compulsoryCredit}}学时</span>
          <span style="margin-right: 5px;" v-if="itemObj.compulsoryCredit && itemObj.compulsoryCredit !== '0' && $store.state.app.footer.webTemplateType.indexOf('V4') == -1">公需课-{{itemObj.compulsoryCredit}}学时</span>
          <span v-if="itemObj.electiveCredit && itemObj.electiveCredit !== '0' && $store.state.app.footer.webTemplateType.indexOf('V4') !== -1">选修课-{{itemObj.electiveCredit}}学时</span>
          <span v-if="itemObj.electiveCredit && itemObj.electiveCredit !== '0' && $store.state.app.footer.webTemplateType.indexOf('V4') == -1">专业课-{{itemObj.electiveCredit}}学时</span>
          <span v-if="!itemObj.electiveCredit || !itemObj.compulsoryCredit">{{itemObj.credit}}学时</span>
        </div>

        <div v-if="itemObj.remainLearnDay">距课程结束还有 <span class="remaimg-time">{{itemObj.remainLearnDay}} </span>天</div>
      </div>
      <div>
        <div class="price" v-if="itemObj.userStatus == '-1' && itemObj.price != '27'">
            <div class="new">￥{{$utils.calPrice(itemObj.price) }}</div>
            <div>原价：￥{{$utils.calPrice(itemObj.designPrice) }}</div>
        </div>
        <div class="price" v-if="itemObj.userStatus == '-1' && itemObj.price === '27'">
          <div class="free">免费</div>
        </div>
        <div class="enroll-end-btn" v-if="itemObj.userStatus == '1'">待审批</div>
        <div class="enroll-end-btn" v-if="itemObj.userStatus != '1' && itemObj.userStatus != '0' &&   $utils.compareDateTwo($utils.getDate(),itemObj.strattime)">未开始</div>
        <div class="enroll-end-btn" v-if="itemObj.userStatus != '1' && itemObj.userStatus != '0' &&  $utils.compareDateTwo(itemObj.endtime,$utils.getDate())">已结束</div>
        <div class="start-course load-class" v-if="itemObj.userStatus == '0' && $utils.compareDate(itemObj.strattime,$utils.getDate(),itemObj.endtime) && itemObj.schedule.indexOf('100') == -1"   @click="loadTcourse(itemObj)">进入课程</div>
        <div class="dis-class" v-if="itemObj.schedule && itemObj.schedule.indexOf('100') == -1 && itemObj.userStatus == '0' && !$utils.compareDate(itemObj.strattime,$utils.getDate(),itemObj.endtime)">进入课程</div>
        <div class="start-course load-class" v-if="itemObj.userStatus == '-1' && $utils.compareDate(itemObj.strattime,$utils.getDate(),itemObj.endtime) && itemObj.price !== '0'  && itemObj.price !== '27'" @click="chooseTcourse(itemObj)">我要报名</div>
        <div class="start-course load-class" v-if="itemObj.userStatus == '-1' && $utils.compareDate(itemObj.strattime,$utils.getDate(),itemObj.endtime) &&  itemObj.price == '0'" @click="chooseCouser(itemObj)">我要报名</div>
        <div class="start-course load-class" v-if="itemObj.userStatus == '-1' && $utils.compareDate(itemObj.strattime,$utils.getDate(),itemObj.endtime) &&  itemObj.price == '27'" @click="open()">我要报名</div>

       <!-- <div class="pass-course" v-if="itemObj.userStatus == '0' && !$utils.compareDate(itemObj.strattime,$utils.getDate(),itemObj.endtime) && itemObj.schedule && itemObj.schedule.indexOf('100') == -1">
          <img src="~@assets/images/my-train-class-unpass-logo.png" alt="">
        </div>-->
        <div class="start-course load-class" style="right: 138px;top: 83px;width: 85px;height: 33px;line-height: 33px;" v-if="itemObj.encodeBackgroundImage && itemObj.isDownloadTable" @click="showCertificateDialog(itemObj)">查看证书</div>
        <div class="pass-course" @click="loadTcourse(itemObj)" v-if="itemObj.schedule && itemObj.schedule.indexOf('100') !== -1">
          <img src="~@assets/images/my-train-class-pass-logo.png" alt="">
          <!--<img src="~@assets/images/my-train-class-unpass-logo.png" alt="">-->
        </div>

      </div>
    </div>
    <div class="course-status-tip" v-if="itemObj.userStatus == 0">已购买</div>
    <el-dialog
      title="查看证书"
      :visible.sync="showCertificate" width="70%"
    >
      <div id="capture" ref="capture" :style="{background: `url(${itemObj.encodeBackgroundImage}) no-repeat 0 0 `}" v-if="certificateInfo.trainingcourse">
        <!--<div id="capture" ref="capture" v-if="certificateInfo.trainingcourse">-->
        <!--<h2>{{certificateInfo.trainingcourse.name}}</h2>-->
        <div class="table">
          <div class="tr">
            <div class="td-4 td">主办单位</div>
            <div class="td-6 td">{{certificateInfo.trainingcourse.host}}</div>
          </div>
          <div class="tr">
            <div class="td-4 td">学习形式</div>
            <div class="td-6 td" v-if="certificateInfo.trainingcourse.type == '0'">网上学习</div>
            <div class="td-6 td" v-if="certificateInfo.trainingcourse.type == '1'">面授培训班</div>
            <div class="td-6 td" v-if="certificateInfo.trainingcourse.type == '2'">上级选调</div>
            <div class="td-6 td" v-if="certificateInfo.trainingcourse.type == '3'">域外培训</div>
          </div>
          <div class="tr">
            <div class="td-4 td">学习年度</div>
            <div class="td-2 td" >{{certificateInfo.trainingcourse.trainingYear}}</div>
            <div class="td-2 td" >总学时(分)</div>
            <div class="td-2 td">{{certificateInfo.trainingcourse.totalCredit}}</div>

          </div>
          <div class="tr">
            <div class="td-8 td ellipsis-two" style="line-height: 47px;">学习内容(科目)</div>
            <div class="td-2 td">考核</div>
          </div>
          <div class="tr" v-for="(item,index)  in certificateInfo.trainingcourse.courses.slice(0,4)" :key="index">
            <div class="td-8 td">{{item.name}}</div>
            <div class="td-2 td "> <span v-if="item.name">合格</span></div>
          </div>
        </div>

        <div class="table">
          <p style="margin-top: 15px;">参训人员姓名：{{certificateInfo.user.name}}</p>

          <div style="margin-top: 13px;">
            <img class="imgCode" :src="certificateInfo.encodeQRCode"  alt="">
            <!--<img class="imgCode"  src="https://gszjjy.ceivs.cn/static/images/WeChatKF.png" alt="">-->
          </div>
        </div>

        <div class="date-contanier">
          <p>{{certificateInfo.trainingcourse.finishTime.substring(0,4)}}年</p>
          <p>{{certificateInfo.trainingcourse.finishTime.substring(5,7)}}月</p>
          <p>{{certificateInfo.trainingcourse.finishTime.substring(8,10)}}日</p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="load">下载</el-button>
        <el-button @click="showCertificate = false">取 消</el-button>
      </span>
    </el-dialog>




  </div>
</template>

<script>
  import index from "./indexjs"
  export default {
    ...index
  }
</script>

<style scoped lang="scss">
  @import "~@/styles/variables.scss";
  @import "index";
</style>
